import React, { Component } from "react";

class Cpn extends Component {
  constructor() {
    super()
    console.log('调用了Cpn的constructor');
  }
  render() {
    console.log('调用了Cpn的render');
    return (
      <div>我是Cpn组件</div>
    )
  }
  componentDidMount() {
    console.log("执行了Cpn组件的componentDidMount方法");
  }
  componentWillUnmount() {
    console.log('调用了Cpn的conponentsWillUnmount方法');
  }
  componentDidUpdate() {
    console.log('调用了Cpn的componentDidUpdate');
  }
}

export default class App extends Component {
  constructor() {
    super()
    console.log('执行了组件的constructor方法');
    this.state = {
      counter: 0,
      isShow: true
    }
  }
  render() {
    console.log('执行了组件的render方法');
    return (
      <div>
        <span>
          我是App组件
          <h2>
            当前计数： {this.state.counter}
          </h2>
          <button onClick={e => this.increment()}>+1</button>
          <button onClick={e => this.delcrement()}>-1</button>
          <hr />
          <button onClick={e => this.changeIsShow()}>切换</button>
          {this.state.isShow && <Cpn />}
        </span>
      </div>
    )
  }
  increment() {
    this.setState({
      counter: this.state.counter + 1
    })
  }
  delcrement() {
    this.setState({
      counter: this.state.counter - 1
    })
  }
  changeIsShow() {
    this.setState({
      isShow: !this.state.isShow
    })
  }

  // 当组件挂在成功后的回调
  componentDidMount() {
    console.log('执行了组件的ComponentDidMount');
  }

  // 组件发生更新
  componentDidUpdate() {
    console.log('执行了组件的ComponentDidUpdate');
  }
}